<template>
  <div class="container">
   <div class="content">
    <div class="title">热门排行</div>
    <div class="sort">
      <div style="padding:0 0 10px 0;">
        <span style="color:gray;">最新上架</span>
        <span @click="next" style="margin-right:30px;">&gt;</span>
        <span @click="pre">&lt;</span>
      </div>
      
      <div @click="goDetail(item)" class="item" v-for="item in newest" :key="item.goods_id">
        <div class="img"><img v-lazy="item.goods_url" width="100px;"></div>
        <div class="hover">
            <p style="font-size:14px;">{{item.goods_title}}</p>
            <p style="color:#E64347;">￥{{item.goods_price}}</p>
            <button @click.stop="addCar(item.goods_id)"><i class="el-icon-shopping-cart-full"></i></button>
        </div>
      </div>
    </div>

    <div class="sort">
      <div style="padding:0 0 10px 0;">
        <span style="color:gray;">价格实惠</span>
        <span @click="next(id='price')" style="margin-right:30px;">&gt;</span>
        <span @click="pre(id='price')">&lt;</span>
      </div>
      
      <div @click="goDetail(item)" class="item" v-for="item in price" :key="item.goods_id">
        <div class="img"><img v-lazy="item.goods_url" width="100px;"></div>
        <div class="hover">
            <p style="font-size:14px;font-family: '宋体';">{{item.goods_title}}</p>
            <p style="color:#E64347;font-size:24px;">￥{{item.goods_price}}</p>
            <button @click.stop="addCar(item.goods_id)"><i class="el-icon-shopping-cart-full"></i></button>
        </div>
      </div>
      
    </div>
    <div class="clear"></div>
    <div class="button"><button @click="moreGoods">查看更多商品</button></div>
   </div>
  </div>
</template>

<script>
import {reqSortNew,reqSortPrice,reqAddCar} from '../../api'
export default {
    name:'Sort',
    data() {
        return {
            newest:[],
            price:[],
            mark:0 //
        }
    },
    async mounted() {
        let mark = 0
        this.newest = await reqSortNew(mark)
        this.price = await reqSortPrice(mark)
    },
    methods: {
        async next(id){
            this.mark += 1
            if(this.mark >2 ){
                this.mark = 2
                this.$message.warning('没有更多商品了！')
            }else{
                if (id === 'price') {
                    this.price = await reqSortPrice(this.mark)
                }else{
                    this.newest = await reqSortNew(this.mark)
                }
                
            }
        },
        async pre(id){
            this.mark -= 1
            if (this.mark < 0) {
                this.mark = 0
                this.$message.warning('没有更多商品了！')
            }else{
                if (id === 'price') {
                    this.price = await reqSortPrice(this.mark)
                } else {
                    this.newest = await reqSortNew(this.mark)
                }
            }
        },
        moreGoods(){ 
            this.$router.push('/mall')
        },
        goDetail(item){
            const array = JSON.stringify(item)
            this.$router.push({path:'/detail',query:{value:array}})
        },
        addCar(id){ //添加到购物车
            if (JSON.parse(localStorage.getItem('key') === null)) {
                this.$message.error('登录令牌不存在！')
                this.$router.push('/user/info')
            }else{
                let token = JSON.parse(localStorage.getItem('key')).token
                if(reqAddCar(id,token).exist === false) {
                    this.$message.error('登录令牌失效，请重新登录！')
                    this.$router.push('/user/info')
                }else{
                    this.$message.success('添加到购物车成功,可前往购物车查看！')
                }
            }
        }
    },
}
</script>

<style scoped>
.img{
    height:100px;
    overflow:hidden;
    border-radius: 4px;
}   
.sort{
    float: left;
    width: 50%;
}
.sort span:nth-of-type(n+2){
    float:right;
    margin-right: 10px;
    font-family: '黑体';
    cursor: pointer;
    font-size: 20px;
}
.sort span:nth-of-type(n+2):hover{
    color: #c69c6c;
}
.item:after{
    content: '  ';
    display: table;
    clear: both;
    /* 以上代码解决浮动，父元素无高度 */
    margin-bottom: 8px;
}
.item > div{
    float:left;
}
.item > div p:first-child{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.item > div p:nth-last-of-type(n+2){
    margin-bottom: 5px;
}
.hover{
    width: calc(100% - 150px);
    padding-left:15px;
    height: 100px;
}
.item{
    width: calc(100% - 120px);
    padding: 6px 6px 1px 6px;
    cursor: pointer;
    transition: all 0.5s;
}
.item:hover{
    background: white;
    border-radius: 8px;
    transition: all 0.5s;
}
button{
    padding: 5px 12px;
    margin: 5px 5px 0 0;
}
.button{
    text-align: center;
}
.button button{
    background: #F4F3F1;
    color: #c69c6c;
    border: 1px solid #c69c6c;
    width: 260px;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: 100;
    margin-top: 40px;
}
.button button:hover{
    background: #c69c6c;
    color: white;
}
.item > div i{
    color: white;
    font-size: 16px;
}
</style>